<template>
  <div class="container-box">
    <h2>菜单管理</h2>&nbsp;
    <span>主要用于系统的菜单和按钮权限进行管理</span>
    <!--表单区域-->
    <div class="table-box">
      <!--操作区域-->
      <el-row type="flex" justify="end" class="tool-bar">
        <div>
          <el-button type="primary" size="small">新增菜单</el-button>
        </div>
      </el-row>
      <el-table
        :header-cell-style="{
          background: '#fafafa'}"
        :data="menuList"
        row-key="id"
      >
        <!-- prop表示这一列展示哪个数据 -->
        <el-table-column width="200%" prop="title" label="名称" />
        <el-table-column prop="path" label="路由地址" />
        <el-table-column prop="icon" label="图标">
          <template slot-scope="{row}">
            <svg-icon v-if="row.icon" :icon-class="row.icon" />
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="标识" />
        <el-table-column prop="type" label="类型">
          <template slot-scope="{row}">
            <el-tag style="margin: 4px;" :type="row.type === 'menu' ? 'success' : ''" :label="row.type">{{ row.type === 'menu' ? '菜单' : '按钮' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="权重" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="{row}">
            <span :class="row.status === 1 ? 'showname' : 'hidename'">显示</span>
            <el-switch v-model="row.status" inactive-color="#bcbcbc" :width="53" :active-value="1" :inactive-value="0" />
            <span :class="row.status === 0 ? 'showname' : 'hidename'" style="left: 30px;">隐藏</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="text"
              :class="row.type !== 'menu' ? 'hidename' : ''"
            >添加子级</el-button>
            <el-button
              size="small"
              type="text"
            >编辑</el-button>
            <el-button
              size="small"
              type="text"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getMenuList } from '@/api/menu'
import { transListToTreeData } from '@/utils/index'
export default {
  name: 'Tag',
  data() {
    return {
      list: [],
      menuList: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 获取数据
    async initData() {
      const res = await getMenuList()
      this.menuList = transListToTreeData(res.data, 0)
      console.log(this.menuList)
    }
  }
}
</script>
<style lang="scss" scoped>

h2 {
  display: inline-block;
}
.container-box{
  padding: 30px;
}
.filter-form,
.tool-bar{
  margin-bottom: 10px;
}
.table-box {
  background-color: #fff;
  padding: 30px;
}
// ::v-deep .el-table__header-wrapper {
//   background-color: rgb(250, 250, 250)!important;
// }
// scss 代码
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:before {
  content: "\e723";
  font-size: 16px;
}
::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:hover {
  color: rgb(146, 188, 255);
}
::v-deep .el-table .el-table__expand-icon--expanded {
  transform: rotate(0);
  .el-icon-arrow-right:before {
    content: "\e722";
    font-size: 16px;
  }
}
svg {
  font-size: 18px;
}
.showname {
  position: absolute;
  z-index: 9999;
  top: 23px;
  left: 16px;
  color: #fff;
  font-size: 12px;
}
.hidename {
  display: none;
}
.el-button+.el-button {
  margin-left: 0;
  margin-right: 10px;
}
button, html [type="button"] {
  margin-right: 10px;
}
</style>
